<template>
	<div class="numericalDef">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="componentI18n('componentStyle.style','风格')">
				<!--标题和边框基础风格-->
				<component-style :curComponent="curComponent"></component-style>
				<!--指标卡数据风格-->
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="numericalI18n('indexLayout','指标风格布局')">
                        <a-form ref="form" layout="vertical">
                            <a-row>
                                <a-col :span="24">
                                    <a-form-item :label="numericalI18n('indicatorStyle','指标卡风格')">
                                        <div class="numericalDef-style">
                                            <div class="numericalDef-style-list" @click="config.styles.stylesCommon.nndicatorStyle=1" :class="[config.styles.stylesCommon.nndicatorStyle ==1?'numericalDef-style-list-hover':'']">
                                                <div class="numericalDef-style-list-icon" v-if="config.styles.stylesCommon.nndicatorStyle ==1">
                                                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                                                </div>
                                                <img :src="getImage('/image/beijingtianchong.png')">
                                                <div>{{numericalI18n('backgroundFilling','背景填充')}}</div>
                                            </div>
                                            <div class="numericalDef-style-list" @click="config.styles.stylesCommon.nndicatorStyle=2" :class="[config.styles.stylesCommon.nndicatorStyle ==2?'numericalDef-style-list-hover':'']">
                                                <div class="numericalDef-style-list-icon" v-if="config.styles.stylesCommon.nndicatorStyle ==2">
                                                    <rx-icon-show icon="icon-linedui"></rx-icon-show>
                                                </div>
                                                <img :src="getImage('/image/fengexian.png')">
                                                <div>{{numericalI18n('dividingLine','分隔线')}}</div>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="14">
                                    <a-form-item :label="numericalI18n('indicatorColor','指标卡块背景色')">
                                        <rx-color-picker v-model:value="config.styles.stylesCommon.background" :placeholder="'指标卡块背景色'"></rx-color-picker>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="10">
                                    <a-form-item :label="numericalI18n('indicatorBorder','指标块边框')">
                                        <a-switch size="small" v-model:checked="config.styles.stylesCommon.borderShow" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row v-if="config.styles.stylesCommon.borderShow">
                                <a-col :span="14">
                                    <a-form-item :label="numericalI18n('borderColor','边框色')">
                                        <rx-color-picker v-model:value="config.styles.stylesCommon.borderColor" :placeholder="'边框色'"></rx-color-picker>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="10">
                                    <a-form-item :label="numericalI18n('borderThickness','边框粗细')">
                                        <a-input-number v-model:value="config.styles.stylesCommon.borderNumber" :min="1"  />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="14">
                                    <a-form-item :label="'pc'+numericalI18n('numberPerRow','每行个数')">
                                        <a-input-number v-model:value="config.styles.stylesCommon.lineNumber" :min="1"  />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="10">
                                    <a-form-item :label="'mobile'+numericalI18n('numberPerRow','每行个数')">
                                        <a-input-number v-model:value="config.styles.stylesCommon.mobileLineNumber" :min="1"  />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="12">
                                    <a-form-item :label="numericalI18n('indexSpacing','指标块间距')+'(px)'">
                                        <a-input-number v-model:value="config.styles.stylesCommon.interval" :min="1"  />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
					</a-collapse-panel>
					<a-collapse-panel key="2" :header="numericalI18n('fontStyle','字体风格')">
						<div class="numerical-style">
							<div class="numerical-style-head">
								<div>{{componentI18n('componentStyle.fontSize','字体大小')}}(px)</div>
								<div>{{componentI18n('componentStyle.fontColor','字体颜色')}}</div>
								<div>{{componentI18n('componentStyle.fontThickness','字体粗细')}}</div>
							</div>
							<div class="numerical-style-list" v-for="(time,index) in config.styles.stylesCommon.style" :key="index">
								<div>
									<div class="numerical-input-name">{{time.name}}</div>
									<a-input-number v-model:value="time.fontSize" class="numerical-input" :min="0"/>
								</div>
								<div>
									<a-input class="numerical-input" v-model:value="time.color" type="color"/>
								</div>
								<div>
									<a-select class="numerical-input" v-model:value="time.fontWeight">
										<a-select-option value="normal">{{commonI18n('componentStyle.normal','正常')}}</a-select-option>
										<a-select-option value="bold">{{commonI18n('componentStyle.bold','加粗')}}</a-select-option>
									</a-select>
								</div>
							</div>
						</div>
					</a-collapse-panel>
					<a-collapse-panel key="3" :header="numericalI18n('indicatorIcon','指标装饰图标')">
                        <template #extra >
                            <div @click.stop="">
                                <a-switch v-model:checked="config.styles.stylesCommon.iconShow" size="small"/>
                            </div>
                        </template>
						<a-row>
							<a-col :span="24">
								<a-form-item :label="numericalI18n('iconPosition','图标位置')">
									<a-radio-group v-model:value="config.styles.stylesCommon.iconLocation">
										<a-radio value="top">
											{{numericalI18n('above','上方')}}
										</a-radio>
										<a-radio value="left">
											{{numericalI18n('left','左方')}}
										</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
							<a-col :span="24">
								<a-form-item :label="numericalI18n('indicatorSettings','指标块图标设置')">
									<div class="iconfont-common">
										<div class="iconfont-list" :style="{'background':item.color}" @click="selectIcon(item,index)" v-for="(item,index) in config.styles.stylesCommon.iconLIist" :key="index">
                                            <rx-icon-show class="iconfont-del" @click.stop="selectIconDel(index)" size="20px" icon="icon-filldelete_fill"></rx-icon-show>
                                            <rx-icon-show size="26px" :icon="item.icon" ></rx-icon-show>
										</div>
										<div>
                                            <rx-icon-show size="26px" icon="icon-lineaddition"  @click="iconAdd"></rx-icon-show>
										</div>
									</div>
								</a-form-item>
							</a-col>
						</a-row>
					</a-collapse-panel>
				</a-collapse>
				<div class="chart-enlarge">
					<span>{{ i18n('common.screen', '是否全屏') }}</span>
					<a-switch v-model:checked="config.styles.fullScreenShow" size="small" />
				</div>
			</a-tab-pane>
			<a-tab-pane key="dataSources" :tab="componentI18n('componentStyle.data','数据')">
				<div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
                    <a-form-item :label="commonI18n('dataSource','数据来源')">
                        <a-radio-group v-model:value="config.dataSources.source"  default-value="dynamic">
                            <a-radio value="dynamic">{{commonI18n('dynamicData','动态数据')}}</a-radio>
                            <a-radio value="static">{{commonI18n('staticData','静态数据')}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <div v-if="config.dataSources.source=='static'" style="margin:10px 0px 0px 10px">
                        <a-button  @click="setStaticData" style="margin-right: 5px;">{{commonI18n('config','配置')}}</a-button>
                        <a-tag color="green" v-if="config.dataSources.staticData">{{commonI18n('configured','已配置')}}</a-tag>
                        <a-tag color="red" v-else>{{commonI18n('notConfigured','未配置')}}</a-tag>
                    </div>
                    <div class="dataSources-common" v-else>
                        <!--配置项-->
                        <div class="dataSources-common-left">
                            <NumericalConfig :config="config"></NumericalConfig>
                        </div>
                        <div class="dataSources-common-right">
                            <!--数据模型-->
                            <data-model
                                :dataModel="dataModel"
                                :config="config"
                                :modelConfig="modelConfig"
                                :getDataModel="getDataModel"
                                :dimensionStart="dimensionStart"
                                :dimensionEnd="dimensionEnd"
                                :measureStart="measureStart"
                                :measureEnd="measureEnd"
                            ></data-model>
                        </div>
                    </div>
                </div>
			</a-tab-pane>
			<a-tab-pane key="advancedConf" :tab="componentI18n('componentStyle.advanced','高级')" v-if="config.dataSources.source!='static'">
				<a-form layout="vertical">
					<ChartAdvConfig></ChartAdvConfig>
					<!--刷新配置-->
					<refresh-config></refresh-config>
				</a-form>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/*
	指标卡
 */
import {Util,RxColorPicker} from "@lowcode/jpaas-base-lib";
import DataModel from "@/views/modules/design/right-component/common/data-model.vue";
import NumericalConfig from "@/views/modules/design/right-component/common/numerical-config.vue"
import chartDef from "./common/chart-def.js";
import ChartAdvConfig from "@/views/modules/design/right-component/common/chart-adv-config.vue"
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue"
import RxIconAndColor from "./common/rx-icon-and-color.vue";

export default {
	name: "NumericalDef",
	mixins:[chartDef],
	components:{
		DataModel,
        NumericalConfig,
		ChartAdvConfig,
        RefreshConfig,
        RxColorPicker
	},
	data(){
		return{
			customArr: ['customIcon', 'userCustomIcon']
		}
	},
	created(){
		if(!this.config.styles.fullScreenShow){
            this.config.styles["fullScreenShow"]=false;
		}
	},
	methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartLang", key);
        },
		componentI18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		numericalI18n(name,text,key){
			return this.$ti18(name,text,"numericalLang",key);
		},
		selectIcon(type,index){
			let _set = this;
			Util.open(
				{
					component: RxIconAndColor,
					curVm: this,
                    zIndex:999,
					widthHeight: ['800px', '600px'],
					title:this.numericalI18n('iconSelection','图标选择'),
					data:{
						icon:type.icon,
						bgColor:type.color,
						system:type.system,
					}
				},
				function (action,data) {
					if(action =='ok'){
						let obj = {
							icon:data.icon,
							system:data.system,
							color:data.bgColor
						}
						_set.config.styles.stylesCommon.iconLIist.splice(index,1,obj)
					}
				}
			)
		},
		iconDelete(index){
			this.config.styles.stylesCommon.iconLIist.splice(index,1)
		},
		iconAdd(){
			this.config.styles.stylesCommon.iconLIist.push({
				icon:'icon-fillemoji_fill',
				system:'lineage',
				color:'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)'})
		},
        selectIconDel(index){
            this.config.styles.stylesCommon.iconLIist.splice(index,1)
        }
	}
}
</script>

<style scoped>
.numericalDef-style{
	display: flex;
}
.numericalDef-style-list{
	flex: 1;
	height: 138px;
	border-radius: 4px;
	border: solid 1px #dedede;
	overflow: hidden;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	cursor: pointer;
	position: relative;
}
.numericalDef-style-list-icon{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 17px;
	width: 17px;
	border: 15px solid;
	line-height: 0px;
	border-color: #5b8fff #5b8fff transparent transparent;
}
.numericalDef-style-list-icon span{
	display: block;
	margin-top: -11px;
	color: white;
}
.numericalDef-style-list-hover{
	border: solid 2px #4285f4!important;
}
.numericalDef-style-list:hover{
	border: solid 2px #4285f4;
}
.numericalDef-style-list img{
	width: 161px;
	height: 80px;
	margin-top: 14px;
}
.numericalDef-style-list:nth-child(1){
	margin-right: 20px;
}
.dataSources-common{
    width: 100%;
    flex: 1;
    display: flex;
    border: 1px solid #dadde0;
    border-radius: 10px;
    overflow: auto;
}
.dataSources-common-left {
    flex: 1;
    padding:10px;
    border-right: 1px solid #dadde0;
    overflow: auto;
}

.dataSources-common-right {
    flex: 1;
    overflow: auto;
    padding:10px;
}

.dataSources-common-right::-webkit-scrollbar-thumb {
    display: none;
}

.dataSources-common-right:hover::-webkit-scrollbar-thumb {
    display: block;
}
.iconfont-delete{
	font-size: 17px;
	color: red;
	position: absolute;
	top: -5px;
	right: -5px;
}
.iconfont-common{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.iconfont-list{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	margin-right: 10px;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
}
.iconfont-del{
    position: absolute;
    top: -5px;
    right: -5px;
    color: #ff6b6b;
}
.numerical-input{
	width: 105px;
	margin-top: 4px;
	margin-left: 10px;
}
.numerical-input-name{
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-left: 10px;
	width: 114px;
	overflow: hidden;
}
.numerical-style-list{
	display: flex;
	border: 1px solid #d9d9d9;
	border-top: none;
	border-right: none;
	justify-content: center;
	align-content: center;
}
.numerical-style-list >div{
	flex: 1;
	border-right: 1px solid #d9d9d9;
	height: 70px;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}
.numerical-style{
margin-bottom: 20px;
}
.numerical-style-head{
	display: flex;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-radius: 5px 5px 0px 0px;
}
.numerical-style-head div{
	flex: 1;
	text-align: center;
	line-height: 40px;
	font-size: 13px;
	border-right: 1px solid #d9d9d9;
}
.numericalDef{
	height: 100%;
}
.chart-enlarge{
	display: flex;
}
.chart-enlarge span{
	flex: 1;
	color: rgba(0, 0, 0, 0.85);
}
</style>
